<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统 - 添加任务</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('dashboard') }}">
                <i class="fa fa-tasks mr-2"></i>任务管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('dashboard') }}">
                            <i class="fa fa-dashboard mr-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('task_list') }}">
                            <i class="fa fa-list mr-1"></i>任务列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('category_list') }}">
                            <i class="fa fa-folder mr-1"></i>分类管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('reports') }}">
                            <i class="fa fa-bar-chart mr-1"></i>数据报表
                        </a>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-user-circle mr-1"></i>{{ session.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                            <li>
                                <a class="dropdown-item" href="{{ url_for('notifications') }}">
                                    <i class="fa fa-bell mr-1"></i>通知
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('settings') }}">
                                    <i class="fa fa-cog mr-1"></i>设置
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ url_for('logout') }}">
                                    <i class="fa fa-sign-out mr-1"></i>退出登录
                                </a>
                            </li>
                        </ul>
                    </li>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container-fluid mt-4">
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 页面标题和返回按钮 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fa fa-plus-circle mr-2"></i>添加任务
            </h2>
            <a href="{{ url_for('task_list') }}" class="btn btn-secondary">
                <i class="fa fa-arrow-left mr-1"></i>返回列表
            </a>
        </div>

        <!-- 添加任务表单 -->
        <div class="card">
            <div class="card-header bg-white border-bottom border-gray-200">
                <h4 class="card-title mb-0">任务信息</h4>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('add_task') }}" class="needs-validation" novalidate>
                    <!-- 标题 -->
                    <div class="mb-4">
                        <label for="title" class="form-label">任务标题 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="title" name="title" required placeholder="请输入任务标题">
                        <div class="invalid-feedback">
                            请输入任务标题
                        </div>
                    </div>

                    <!-- 描述 -->
                    <div class="mb-4">
                        <label for="description" class="form-label">任务描述</label>
                        <textarea class="form-control" id="description" name="description" rows="4" placeholder="请输入任务详细描述"></textarea>
                    </div>

                    <!-- 分类 -->
                    <div class="mb-4">
                        <label for="category" class="form-label">任务分类</label>
                        <select class="form-select" id="category" name="category_id">
                            <option value="">无分类</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}" style="background-color: {{ category.color }}; color: white;">{{ category.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- 优先级 -->
                    <div class="mb-4">
                        <label class="form-label">优先级 <span class="text-danger">*</span></label>
                        <div class="d-flex gap-3">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="priority" id="priority_high" value="high" checked required>
                                <label class="form-check-label" for="priority_high">
                                    <span class="badge bg-danger">高</span>
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="priority" id="priority_medium" value="medium">
                                <label class="form-check-label" for="priority_medium">
                                    <span class="badge bg-warning">中</span>
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="priority" id="priority_low" value="low">
                                <label class="form-check-label" for="priority_low">
                                    <span class="badge bg-success">低</span>
                                </label>
                            </div>
                        </div>
                        <div class="invalid-feedback">
                            请选择任务优先级
                        </div>
                    </div>

                    <!-- 截止日期和时间 -->
                    <div class="mb-4">
                        <label for="due_date" class="form-label">截止日期和时间</label>
                        <input type="datetime-local" class="form-control" id="due_date" name="due_date">
                    </div>

                    <!-- 负责人 -->
                    <div class="mb-4">
                        <label for="assignee" class="form-label">负责人</label>
                        <select class="form-select" id="assignee" name="assignee_id">
                            <option value="">无负责人</option>
                            {% for user in users %}
                                <option value="{{ user.id }}">{{ user.username }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- 附件上传 -->
                    <div class="mb-4">
                        <label for="attachment" class="form-label">附件</label>
                        <input class="form-control" type="file" id="attachment" name="attachment">
                        <div class="form-text">支持上传文档、图片等附件，单个文件最大5MB</div>
                    </div>

                    <!-- 标签 -->
                    <div class="mb-4">
                        <label for="tags" class="form-label">标签</label>
                        <input type="text" class="form-control" id="tags" name="tags" placeholder="输入标签，用逗号分隔">
                        <div class="form-text">例如：重要, 紧急, 项目A</div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ url_for('task_list') }}" class="btn btn-secondary">取消</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-check-circle mr-1"></i>保存任务
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    <script>
        // 表单验证
        document.addEventListener('DOMContentLoaded', function() {
            // 设置日期时间选择器的最小时间为当前时间
            const now = new Date();
            const dateString = now.toISOString().slice(0, 16); // 取到分钟
            document.getElementById('due_date').min = dateString;
            
            // 初始化表单验证
            const form = document.querySelector('.needs-validation');
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    </script>
</body>
</html>